module.exports = function (content) {
    /**
     * 1.直接使用 style-loader, 只能处理样式
     *      不能处理样式中引入的其他资源
     *
     *      use['./loader/style-loader']
     *
     * 2.借助 css-loader 解决样式中引入的其他资源的问题
     *
     *      use['./loader/style-loader', 'css-loader']
     *
     *      问题是 css-loader 暴露了一段 js 代码，style-loader 需要执行 js 代码，得到返回值，再动态创建 style 标签，插入到页面上不好操作
     *
     * 3.style-loader 使用 pitch loader 用法
     */
    // const script = `
    //     const styleEl = document.createElement('style');
    //     styleEl.innerHTML = ${JSON.stringify(content)};
    //     document.head.appendChild(styleEl);
    // `;
    // return script;
};

module.exports.pitch = function (remainingRequest) {
    // remainingRequest 剩下还需要处理的 loader
    // console.log(remainingRequest); // D:\Developer\WGJ\VSCode_WorkSpace\Web\webpack\source\node_modules\css-loader\dist\cjs.js!D:\Developer\WGJ\VSCode_WorkSpace\Web\webpack\source\src\css\index.css
    // 1.将 remainingRequest 中绝对路径改成相对路径（因为后面只能使用相对路径操作）
    // 希望：../../node_modules/css-loader/dist/cjs.js!../../src/css/index.css
    const relativePath = remainingRequest
        .split('!')
        .map((absolutePath) => {
            // 返回相对路径
            return this.utils.contextify(this.context, absolutePath);
        })
        .join('!');

    console.log(relativePath); //../../node_modules/css-loader/dist/cjs.js!./index.css

    // 2.引入 css-loader 处理后的资源
    // 3.创建 style，将内容插入页面中生效
    const script = `
        import style from "!!${relativePath}";
        const styleEl = document.createElement('style');
        styleEl.innerHTML = style;
        document.head.appendChild(styleEl);
    `;

    // 终止后面 loader 执行
    return script;
};
